<template>
	<view class="evaluation">
		<view id="preload-01"></view>
		<image src="../../static/img/game_bg.gif" class="bg" mode="widthFix"></image>
		<view class="content">
			<view class="answer-sheet" v-if="data">
				<view class="answer-content">
					<!-- <view style="position: absolute;top: -25px;width: 100%;">
						<image class="title-bg" src="../../static/img/game_title_bg.png" mode=""></image>
						<view class="title">{{data.Title}}</view>
					</view> -->
					<view>
						<image class="title-bg" src="../../static/img/jindutiao.png" mode=""></image>
						<view class="title">{{data.Title}}</view>
						<view class="tip">{{current + 1}}/{{data.Questions.length}}</view>
						<view class="topIndex">-第{{current + 1}}题-</view>
					</view>
					
					<view :class="item.Type == 1 ? 'answer-question-title1' : 'answer-question-title'">
						{{current + 1}}. {{data.Questions[current].Content || ''}}
					</view>
					<image class="title-bg1" src="../../static/img/ditu1.png" mode=""></image>
					<view class="answer-question" v-for="(item, indexq) in data.Questions" :key="indexq"
					 :class="{aniBig: current == indexq, aniNext: (current - 1 == indexq) || (current >=0 && indexq >= 0)}"
					 v-if="current == indexq"
					>
					 	<view v-if="item.Type == 2">
							<view v-if="dong == '111'" class="voice" @click="playVoice" :data-voice="item.p1"></view>
							<view v-if="dong == '222'" class="voice1" @click="playVoice" :data-voice="item.p1"></view>
						</view>
					 	
						<image class="title_main" src="" mode="" />
						<view class="" style="transform: translateY(-450px);">
							<view v-if="item.Type == 1" class="questionImg">
								<image :src="item.p1" mode="" />
							</view>
							<view class="answer-question-box">
								<view class="answer-select" v-for="(item, index) in data.Questions[current].Options"
									:key="index" :data-index="index" @click="selectFilter(item, index)">
									<view :class="id == index ? 'answer-select-top1' : 'answer-select-top'">
										<text class="answer-select-li" v-if="index == 0">A</text>
										<text class="answer-select-li" v-else-if="index == 1">B</text>
										<text class="answer-select-li" v-else-if="index == 2">C</text>
										<text class="answer-select-li" v-else>D</text>
										<text :class="id == index ? 'answer-select-txt1' : 'answer-select-txt'">{{item.Content}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const debounce = (func, delay = 200) => {
		let timeout = null
		return function() {
			clearTimeout(timeout)
			timeout = setTimeout(() => {
				func.apply(this, arguments)
			}, delay)
		}
	}
	export default {
		props: ['data'],
		data() {
			return {
				dong: '111',
				on: false,
				info: this.data,
				score: 0,
				current: 0, // 第一问
				num: 0,
				result: 0,
				id: -1,
			}
		},
		methods: {
			playMusic(voive) { // 播放音乐
				console.log('playMusic', this.on, voive.voice);
        this.back = tt.getBackgroundAudioManager() //创建背景音乐
        // this.back.src = "https://fcdn.qiushilaile.com/adx/app-9521611320228939.mp3"
        this.back.src = voive.voice
        // this.back.title = '零卡日记' // 标题为必选项
				this.back.onPlay(() => {
					// tt.showToast({ title: "开始播放" });
				});
        this.back.onEnded(() => {
					// tt.showToast({ title: "播放完毕" });
					this.back.stop()
					this.on = false
					this.dong = '111'
        })
    	},
			pause() { // 暂停播放音乐
				console.log('暂停');
				this.back.pause();
				this.back.onPause((res) => {
					console.log(res);
					// tt.showToast({ title: "暂停播放" });
				});
			},
			playVoice(e) {
				console.log('获取当前录音', e.currentTarget.dataset);
				let voice = e.currentTarget.dataset
				this.on = !this.on
				if (this.on) {
					this.playMusic(voice)
					this.dong = '222'
				} else {
					this.pause()
					this.dong = '111'
				}
			},
			selectFilter(item, index) {
				console.log(item, index);
				if (!item.isSelect) {
					this.id = item.Number - 1;
					// console.log(this.id);
					setTimeout(() => {
						this.select(item)
					}, 400)
					item.isSelect = true
				} else if (this.current == this.data.Questions.length - 1) {
					setTimeout(() => {
						this.$emit("complete")
					}, 400)
				}
			},
			select(item) {
				this.id = -1;
				const gameInfo = getApp().globalData.gameInfo
				if (this.current < this.data.Questions.length - 1) {
					this.current = this.current + 1
					this.num = this.num + parseInt(item.tpAnswerKey)
					gameInfo.num = this.num
				} else {
					this.num = this.num + parseInt(item.tpAnswerKey)
					gameInfo.num = this.num
					this.$emit("complete")
				}
				console.log(gameInfo, this.num, item.tpAnswerKey)
				if (gameInfo.Id == 129) {
					this.back.stop()
					this.on = false
					this.dong = '111'
				}
			}
		},
		computed: {
			percent() { // 进度
				const x = this.current + 1
				const result = 100 / this.data.Questionslength * x
				return result
			}
		},
		filters: {
			bullet(value) {
				const list = ['A', 'B', 'C', 'D', 'E', 'F']
				return list[value]
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 图片在css里预加载
  #preload-01 {
    background: url(http://fcdn.qiushilaile.com/game/default-69061634781396657.png) no-repeat -9999px -9999px;
  }
	.questionImg {
		width: 80%;
		height: 240rpx;
    margin: 0 auto;
		transform: translateY(30rpx);
		border-radius: 30rpx;
		border: 4rpx solid #000;
	}
	.questionImg image {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		display: block;
		margin: 0 auto;
	}
	.voice {
		width: 537rpx;
		height: 86rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-61251631960320029.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
	}
	.voice1 {
		width: 537rpx;
		height: 86rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-22021631961676814.gif) no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
	}
	.title_main {
		// position: absolute;
		width: 100%;
		height: 400px;
		margin-top: 30px;
	}
	.title-bg1{
		position: absolute;
		top: 40px;
		width: 90%;
		margin-left: 5%;
		height: 284rpx;
	}
	.evaluation {
		position: relative;
		height: 100vh;
		overflow: hidden;
		.content {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			
			.answer {
				&-select {
					// margin: 0 0 60rpx 0;
					// width: 580rpx;
					width: 620rpx;
					margin: 0 auto 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					border-radius: 30rpx;
					
					// &:active {
					// 	opacity: .4;
					// 	background-color: #FF785A;
					// }

					&-top {
						width: 620rpx;
						height: 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						align-content: center;
						padding: 0 16rpx;
						background: url(http://fcdn.qiushilaile.com/game/default-21131634624432934.png) no-repeat;
						background-size: 100% 100%;
						border-radius: 20rpx;
						margin: 0 auto;
					}
					&-top1 {
						width: 620rpx;
						height: 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						align-content: center;
						padding: 0 16rpx;
						background: url(http://fcdn.qiushilaile.com/game/default-69061634781396657.png) no-repeat;
						background-size: 100% 100%;
						border-radius: 20rpx;
						margin: 0 auto;
					}

					&-li {
						color: #033288;
    				font-weight: bold;
						font-size: 36rpx;
						margin-left: 8rpx;
						margin-right: 40rpx;
						// text-shadow: -1px 0 #033288, 0 1px #033288, 1px 0 #033288, 0 -1px #033288;
					}
					&-li1 {
						color: #fff;
    				font-weight: bold;
						font-size: 36rpx;
						margin-left: 8rpx;
						margin-right: 40rpx;
						// text-shadow: -1px 0 #033288, 0 1px #033288, 1px 0 #033288, 0 -1px #033288;
					}
					&-txt {
						font-size: 32rpx;
						font-weight: bold;
						color: #033288;
						line-height: 40rpx;
						text-align: left;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					&-txt1 {
						font-size: 29rpx;
						font-weight: bold;
						color: #fff;
						line-height: 40rpx;
						text-align: left;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}

				&-question {
					width: 100%;
					position: absolute;
					top: 200px;
					box-sizing: border-box;
					transform: scale(.8);
					
					&-tip {
						position: absolute;
						border: 1rpx solid #333333;
						margin-left: 250rpx;
						margin-top: -20rpx;
						background-color: #FFFFFF;
						padding: 5rpx 30rpx;
						border-radius: 45rpx;
						z-index: 2;
					}

					&-title {
						width: 630rpx;
						height: 287rpx;
						margin: 80rpx auto 40rpx;
						color: #033288;
						font-size: 32rpx;
						font-weight: bold;
						text-align: left;
						padding: 140rpx 20rpx 10rpx 20rpx;
						position: absolute;
    				left: 5%;
						z-index: 9;
						// background: url(http://fcdn.qiushilaile.com/game/default-50831634716141577.png) no-repeat;
						// background-size: 100% 100%;
					}
					
					&-title1 {
						width: 270px;
						margin: 0 auto;
						// border: 5rpx solid #333333;
						font-size: 32rpx;
						line-height: 32rpx;
						// background-color: #FFFFFF;
						text-align: center;
						// padding: 40rpx 10rpx 10rpx 10rpx;
					}

					&-box {
						height: 580rpx;
						margin-top: 60rpx;
					}
				}

				&-content {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					text-align: center;
					color: #333333;

					.title-bg {
						position: absolute;
						top: -25px;
						width: 90%;
						margin-left: 5%;
						height:68rpx;
					}

					.title {
						position: absolute;
						top: -5%;
						font-size: 28rpx;
						font-weight: bold;
						width: 90%;
						height: 68rpx;
						line-height: 68rpx;
						overflow: hidden;
						margin-left: 5%;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #fff;
					}
					.tip {
						width: 129rpx;
						height: 69rpx;
						font-size:44rpx;
						font-weight: bold;
						color: #FFFFFF;
						position: absolute;
						top: 8%;
						right: 3.5%;
						z-index: 9;
					}
					.topIndex {
						position: absolute;
						top: 8.8%;
						left: 0%;
						width: 258rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: bold;
    				color: #fff;
						z-index: 9;
					}
				}

				&-sheet {
					width: 690rpx;
					height: 1016rpx;
					position: relative;
					margin-left: 10rpx;
					margin-top: 200rpx;
					// padding: 0 25rpx;
				}

				&-bg {
					width: 100%;
					height: 1016rpx;
				}
			}
		}

		.bg {
			width: 100vw;
			height: 100vh;
		}
	}
	.progress {
		&-box {
			width: 540rpx;
			margin: 0 auto 0 36rpx;
		}

		&-txt {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}
	}
	.aniSmall {
		animation: aniSmall .6s both;
	}
	@keyframes aniSmall {
		0% {
			transform: scale(1);
		}

		95% {
			transform: scale(0.8);
		}
	}
	.aniBig {
		animation: aniBig .8s both;
	}
	@keyframes aniBig {
		0% {
			// opacity:0;
			transform: scale(.8);
		}
		95% {
			// opacity:0;
			transform: scale(1);
		}
		100% {
			// opacity:1;
			transform: scale(1);
		}
	}
	.aniBack {
		animation: aniBack .6s both;
	}
	@keyframes aniBack {
		0% {
			z-index: 999;
			transform: translate(-120%, 50%) scale(.8) rotate(-30deg);
		}

		95% {
			z-index: 999;
			transform: translate(0, 0) scale(1) rotate(0);
		}

		96% {
			z-index: 999;
			transform: translate(0, 0) scale(1) rotate(0);
		}

		100% {
			z-index: 999;
			transform: translate(0, 0) scale(1) rotate(0);
		}
	}
	.aniNext {
		animation: aniNext .8s both;
	}
	// @keyframes aniNext {
	// 	0% {
	// 		z-index: 999;
	// 		transform: translate(0, 0) scale(1) rotate(0);
	// 	}

	// 	95% {
	// 		z-index: 999;
	// 		transform: translate(-120%, 50%) scale(.8) rotate(-30deg);
	// 	}

	// 	100% {
	// 		z-index: 999;
	// 		transform: translate(-120%, 50%) scale(.8) rotate(-30deg);
	// 	}
	// }
	@keyframes aniNext {
		0% {
			transform:translateX(1000px)
		}
		60% {
			transform:translateX(-30px)
		}
		95% {
			transform:translateX(10px)
		}
		100% {
			transform:translateX(0)
		}
	}
</style>
